<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="uid" label="编号" width="180"></el-table-column>
      <el-table-column prop="name" label="昵称" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="username" label="账户"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="modifytime" label="创建时间"></el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="handleDeleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加用户 -->
    <div style="width: 100%">
      <div style="text-align: left;margin-top: 15px;margin-right: 850px; display: inline-block">
        <el-button @click="goAddUser"  type="primary" round>增加用户</el-button>
      </div>
      <div style="text-align: right;margin-top: 15px;margin-right: 15px; margin-bottom: -20px;display: inline-block">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handCurrent"
          :current-page="current"
          :page-size="size"
          :page-count="pages"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "UserInfo",
  mounted() {
    this.selectUserPage();
  },
  data() {
    return {
      tableData: [],
      current: 1,
      size: 2,
      total: null,
      pages: null
    };
  },
  methods: {
    goAddUser() {
      // 跳转到添加用户页面
      this.$router.push("/userAdd");
    },
    handleDeleteClick(row) {
      // 发送删除请求
      axios.delete("http://localhost:8002/user/deleteUserByUid/" + row.uid)
        .then((response) => {
          console.log(response);
          if (response.data.data > 0) {
            this.$message.success("删除成功");
            // 重新加载页面
            window.location.reload();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((error) => {
          console.error("删除用户失败:", error);
          this.$message.error("删除失败");
        });
    },
    handleClick(row) {
      // 跳转到修改用户信息页面
      this.$router.push("/userEdit?uid=" + row.uid);
    },
    handCurrent(row) {
      this.current = row;
      this.selectUserPage();
    },
    selectUserPage() {
      axios
        .get("http://localhost:8002/user/selectByPage", {
          params: {
            currentPageNo: this.current,
            pageSize: this.size
          }
        })
        .then((response) => {
          console.log(response);
          this.tableData = response.data.data.records;
          this.current = response.data.data.current;
          this.size = response.data.data.size;
          this.total = response.data.data.total;
          this.pages = response.data.data.pages;
        })
        .catch((error) => {
          // 错误处理
        });
    }
  }
};
</script>
